<template>
  <div class="home">
    <view-head></view-head>
    <div class="h-banner">
      <el-carousel height="530px">
        <el-carousel-item v-for="(item,index) in imgList" :key="index">
          <img :src="item.res"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="h-study clear">
        <div class="h-study-c contain">
            <div class="fl-left">
                <div class="h-l-bg">
                  <img src="../assets/img/info.gif" width="560px"/>
                </div>

            </div>
            <div class="fl-right h-l-right">
              <h1>从零开始的量化学习之路</h1>
              <p>只有持续学习才能不断进取，最终攀登量化投资高峰，通过模型赢得属于自己的胜利。聚宽量化课堂为你准备了从基础知识到投资策略模型的完整解读，我们准备了超过100节课程，无论你是交易者、还是金融从业者、还是IT开发者，在量化课堂，都可以提升开发实力，启迪策略思路</p>
              <el-button type="text">进入课堂</el-button>
            </div>
        </div>
    </div>
    <div class="h-yj clear">
       <div class="h-yj-c contain">
            <div class="fl-left h-yj-left">
              <h1>策略研究平台</h1>
              <p>我们提供经过专业清洗的A股数据、期货数据、期权数据、基金数据、宏观数据，还提供数百个常用因子和第三方数据库；您可以方便地使用聚宽进行策略研究、历史回测、模拟交易、实盘交易</p>
              <el-button type="text">进入课堂</el-button>
            </div>
            <div class="fl-right">
              <img src="../assets/img/python.svg" width="560px"/>
            </div>
       </div>
    </div>
    <div class="h-user clear">
        <div class="h-user-c contain">
          <h1>400+金融机构在使用聚宽</h1>
          <div><el-button type="primary">主要按钮</el-button></div>
        </div>
    </div>
    <view-foot></view-foot>
  </div>
</template>

<script>

import Header from '@/components/__header.vue'
import Footer from '@/components/__footer.vue'
export default {
  name: 'home',
  components: {
      'view-head':Header,
      'view-foot':Footer
  },
    data(){
      return {
          "imgList":[
              {"url":'',"name":'',"res":require("../assets/img/banner_1.png")},
              {"url":'',"name":'',"res":require("../assets/img/banner_2.png")},
          ]
      }
    }
}
</script>
<style scoped lang="scss">
  .el-carousel__item img{
     width:100%; min-width: 1200px;
  }
  .h-study{
    width: 100%; position: relative;background: rgb(250,250,250);
    .h-study-c{
       height: 530px;
        .h-l-bg{
          background: url("../assets/img/info-box.svg") no-repeat;
        }
        .h-l-right{
           width: 560px; margin-top: 180px;
          h1{ margin-bottom: 20px}
          p{ line-height: 30px; }
        }
    }
  }
  .h-yj{
    position: relative;
    .h-yj-c{
        height: 560px;
      .h-yj-left{ width: 560px;
        margin-top: 180px;
        h1{ margin-bottom: 20px}
        p{ line-height: 30px; }
      }
    }
  }
  .h-user{
    background: url("../assets/img/partner.png") no-repeat;height: 400px; position: relative;
    .h-user-c{
        h1{ text-align: center; margin-bottom: 20px; padding-top: 150px}
        div{ text-align: center;}
    }
  }
</style>
